<template>
    <div class="container">
        <el-card shadow="hover" style="padding:0">
            <el-row>
                <el-col>
                    <el-input
                        placeholder="请输入内容"
                        v-model="keyword"
                        class="input-with-select"
                        style="width: 300px;"
                        id="tipinput"
                    >
                        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div v-if="result">
                        {{result.cityname}}
                        {{result.adname}}
                        {{result.address}}
                        {{result.name}}
                        {{result.location.lat}}
                        {{result.location.lng}}
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div id="container" class="map-container" :style="`height: 300px`"></div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
let map, marker, geolocation, district, polygons = [];
export default {
    name: "MapLG",
    components: {
    },
    data() {
        return {
            keyword: '北京大学',
            items: [],
            result: null
        };
    },
    mounted() {
        this.$nextTick(function () {
            this.initMap();
        });
    },
    methods: {
        initMap() { //初始化地图
            let _this = this
            map = new AMap.Map("container", {
                resizeEnable: true,
                zoom: 11, //初始地图级别
            });
            map.on("complete", function () {
                AMap.plugin('AMap.Autocomplete', function () {
                    // 实例化Autocomplete
                    var autoOptions = {
                        // input 为绑定输入提示功能的input的DOM ID
                        input: 'tipinput'
                    }
                    var autoComplete = new AMap.Autocomplete(autoOptions);
                    // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
                    AMap.event.addListener(autoComplete, "select", _this.handleSelect);//注册监听，当选中某条记录时会触发
                })
            });
        },

        handleSelect(e) { // 根据输入提示来选择位置搜索
            let _this = this
            AMap.plugin('AMap.PlaceSearch', function () {
                //构造地点查询类
                var placeSearch = new AMap.PlaceSearch({
                    pageSize: 1, // 单页显示结果条数
                    map: map, // 展现结果的地图实例
                    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                });
                placeSearch.setCity(e.poi.adcode);
                //关键字查询查询
                placeSearch.search(e.poi.name, function (status, result) {
                    // 查询成功时，result即对应匹配的POI信息
                    if (status === 'complete') {
                        if (result.info === 'OK') {
                            _this.result = result.poiList.pois[0]
                        }
                    }
                });  
            })
        },

        handleSearch() { // 搜索并获取坐标
            let _this = this
            AMap.plugin('AMap.PlaceSearch', function () {
                //构造地点查询类
                var placeSearch = new AMap.PlaceSearch({
                    pageSize: 1, // 单页显示结果条数
                    //map: map, // 展现结果的地图实例
                    //autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                });
                //关键字查询

                placeSearch.search(_this.keyword, function (status, result) {
                    // 查询成功时，result即对应匹配的POI信息
                    if (status === 'complete') {
                        if (result.info === 'OK') {
                            _this.items = result.poiList.pois
                            //先删除标记点
                            if (marker) {
                                map.remove(marker);
                            }
                            for (let item of _this.items) {
                                console.log(JSON.stringify(item.location));
                                // 创建一个 Marker 实例：
                                marker = new AMap.Marker({
                                    position: item.location,
                                    title: item.name
                                });
                                // 将创建的点标记添加到已有的地图实例：
                                map.add(marker)
                            }
                            map.setFitView();
                        }
                    }
                })
            });
        },
    }
};
</script>

<style scoped>
.pig {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 56px;
    height: 500px;
}
</style>